<template>
  <!-- 社区 -->
  <div class="blog">
    <div v-if="!$isMobile">
      <div class="head">
        <div class="g-con">
          <Banner bannerModel="6" />
          <div class="tab-box">
            <div
              class="btn-pre"
              @click="preFn"
              v-if="zoningList.length > 5"
            >
              <el-icon>
                <ArrowLeft />
              </el-icon>
            </div>
            <div
              class="btn-next"
              @click="nextFn"
              v-if="zoningList.length > 5"
            >
              <el-icon>
                <ArrowRight />
              </el-icon>
            </div>
            <ul
              class="tab-list"
              ref="tabList"
            >
              <li
                v-for="(item, index) in zoningList"
                :key="item"
                class="tab-item"
                :style="{ 'background-image': 'url(' + bgImgArr[index % 6] + ')' }"
                :title="item.zoningName"
                @click="changeList(item)"
              >
                <h3 class="line-1">{{ item.zoningName }}</h3>
                <p>
                  <span>{{ item.articleNum }}</span
                  >{{ t('blog.txt1') }}
                </p>
                <img
                  src="@/assets/img/icon_xuanzhong_pre.png"
                  alt=""
                  v-if="queryForm.zoningId == item.id"
                  class="type-active"
                />
              </li>

              <li
                v-bind:style="{ 'background-image': 'url(' + bg_gg + ')' }"
                class="tab-item"
                @click="changeList({ id: -1 })"
              >
                <h3>{{ t('blog.txt2') }}</h3>
                <p>
                  <span>{{ platAnnouncement }}</span
                  >{{ t('blog.txt1') }}
                </p>
                <img
                  src="@/assets/img/icon_xuanzhong_pre.png"
                  alt=""
                  v-if="queryForm.zoningId == -1"
                  class="type-active"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="g-con">
          <div class="grid">
            <div class="left">
              <el-card class="card">
                <div
                  slot="header"
                  class="head"
                >
                  <span>{{ t('blog.t1') }}</span>
                </div>
                <div class="divider"></div>
                <div class="list-box noscrollbar">
                  <el-row
                    class="item"
                    v-for="(item, index) in listData"
                    :key="index"
                  >
                    <el-col
                      :span="24"
                      class="flexsb"
                      @click.stop="routerPush('/member', { id: item.customerId }, false)"
                    >
                      <div class="user-info ">
                        <div class="head-sculpture">
                          <img
                            :src="item.avatar || item.publishUserAvatar || defaultAvatar"
                            alt=""
                          />
                        </div>
                        <div class="name">
                          <h2>
                            {{ item.customerName || item.publishUserName }}
                            <span v-if="item.enterpriseFlag === 0"> -- {{ item.enterpriseName }}</span>
                          </h2>
                          <p>{{ item.label }}</p>
                        </div>
                      </div>
                      <div>{{ dateFormat(item.createTime, 2) }}</div>
                    </el-col>
                    <el-col
                      :span="24"
                      class="clearfix mt-1"
                    >
                      <h1
                        class="title fl"
                        @click.stop="routerPush('/blogDetail', { id: item.id }, false, item)"
                      >
                        {{ item.articleTitle || item.title }}
                      </h1>
                    </el-col>
                    <el-col
                      :span="24"
                      class="content"
                    >
                      <!-- <div>
                        {{ dateFormat(item.createTime) + '--' + (item.articleText || toText(item.content, 140)) }}
                      </div> -->

                      <!-- 公告 -->
                      <div v-if="queryForm.zoningId == -1">
                        <!-- {{ toText(item.content, 140) }} -->
                      </div>

                      <div
                        v-else
                        class=""
                      >
                        <div class="text noscrollbar">
                          {{ item.isShowMore ? item.articleText : toText(item.articleText, 150) }}
                          <span
                            v-if="item.articleText?.length > 150"
                            class="show-more"
                            @click="item.isShowMore = !item.isShowMore"
                          >
                            {{ item.isShowMore ? t('blog.b2') : `...${t('blog.b1')}` }}
                          </span>
                        </div>
                      </div>
                    </el-col>

                    <el-col
                      v-if="showConfig"
                      :span="24"
                      class="content"
                    >
                      <ActicleComment
                        v-if="queryForm.zoningId !== -1"
                        :item="item"
                        @getList="getList"
                      />
                    </el-col>
                  </el-row>
                </div>
              </el-card>
              <!-- <el-button type="primary" class="ml-c mt-3">NEXT</el-button> -->
              <div class="mt-2 flexcc">
                <el-pagination
                  layout="prev, pager, next"
                  :total="total"
                  v-model:current-page="page.pageNum"
                  :page-size="page.pageSize"
                  @current-change="handleCurrentChange"
                >
                </el-pagination>
              </div>
            </div>
            <div class="right">
              <el-card>
                <div
                  slot="header"
                  class="head"
                >
                  <span>{{ t('blog.t2') }}</span>
                </div>
                <el-divider></el-divider>
                <div class="box">
                  <div class="head-sculpture">
                    <img :src="creatorInfo.avatar || defaultAvatar" />
                  </div>
                  <p class="name">{{ creatorInfo.customerName }}</p>
                  <p class="signature">{{ creatorInfo.label }}</p>
                  <!-- <div
                    class="btn-style"
                    v-if="memberGradeCode !== 'mfhy'"
                  > -->
                  <div class="btn-style">
                    <el-button
                      type="primary"
                      @click="openDialog('article')"
                      >{{ t('blog.actbtn') }}</el-button
                    >
                    <el-button @click="openDialog('Seek Assist')">{{ t('blog.actbtn2') }}</el-button>
                  </div>
                  <el-row class="my mt-2 mb-2">
                    <el-col :span="8">
                      <p>{{ creatorInfo.articleNum || 0 }}</p>
                      <p>{{ t('blog.i1') }}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>{{ creatorInfo.collectNum || 0 }}</p>
                      <p>{{ t('blog.i2') }}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>{{ creatorInfo.likeNum || 0 }}</p>
                      <p>{{ t('blog.i3') }}</p>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
              <el-card class="mt-3 mb-3">
                <div
                  slot="header"
                  class="head"
                >
                  <span>{{ t('blog.t3') }}</span>
                </div>
                <el-divider></el-divider>
                <ul class="hot-list noscrollbar">
                  <li
                    v-for="(item, index) in hotListData"
                    :key="index"
                    class="hot-item"
                    @click="routerPush('/blogDetail', { id: item.id }, true)"
                  >
                    {{ item.articleTitle }}
                    <p>—{{ item.likeCount }} {{ t('blog.like') }}</p>
                  </li>
                </ul>
                <!-- <span style="margin-left:80%;">{{t('blog.next')}}>></span> -->
                <!-- <div class="mt-2 flexcc">
                <el-pagination
                  layout="prev, pager, next"
                  :hide-on-single-page="total <= hotQuery.pageSize"
                  :total="hotTotal"
                  v-model:current-page="hotQuery.pageNum"
                  :page-size="hotQuery.pageSize"
                  @current-change="hotList"
                >
                </el-pagination>
              </div> -->
              </el-card>
              <div class="advertisement g-ad">
                <a
                  :href="getAd('7', 'href')"
                  target="_blank"
                >
                  <img
                    :src="getAd('7', 'image')"
                    alt=""
                  />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 发布文章 -->
      <el-dialog
        v-if="diaologVis"
        v-model="diaologVis"
        width="1000px"
        :destroy-on-close="true"
        @close="closeArticleFn"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <h4
              :id="titleId"
              :class="titleClass"
            >
              {{ t('blog.actbtn') }}
            </h4>
            <img
              src="@/assets/img/icon_guanbi.png"
              @click="close"
              class="close"
            />
          </div>
        </template>

        <el-form
          ref="txtFormEl"
          :model="txtForm"
          :rules="txtRules"
        >
          <el-row>
            <el-col
              :span="10"
              class="user-info"
            >
              <div class="head-sculpture">
                <img
                  :src="txtForm.enterpriseFlag ? creatorInfo.enterpriseLogo : creatorInfo.avatar"
                  alt=""
                />
              </div>
              <!-- <div class="name">
                    <div class="article-toggle">
                      <h2>
                        {{ creatorInfo.customerName }}
                      </h2>
                      <img v-if="creatorInfo.isEnterprise == 1" src="@/assets/img/icon_yonghuqiehuan.png" alt=""
                        class="toggle-btn ml-1" @click="txtForm.enterpriseFlag = !txtForm.enterpriseFlag">
                    </div> -->
              <div class="name flexsc">
                <div class="article-toggle">
                  <h2
                    class="line-1"
                    style="max-width: 300px"
                  >
                    {{ creatorInfo.customerName }}
                  </h2>
                  <img
                    v-if="creatorInfo.isEnterprise == 1 || memberGradeCode === 'zlhy'"
                    src="@/assets/img/icon_yonghuqiehuan.png"
                    class="toggle-btn ml-1"
                    @click="txtForm.enterpriseFlag = !txtForm.enterpriseFlag"
                  />
                </div>
                <p v-if="!txtForm.enterpriseFlag">
                  {{ creatorInfo.label }}
                </p>
                <p v-if="txtForm.enterpriseFlag">
                  {{ creatorInfo.enterpriseInfo }}
                </p>
              </div>
            </el-col>
            <el-col
              :span="14"
              class="flexsc"
            >
              <el-form-item
                prop="articleTitle"
                class="wp-100"
              >
                <el-input
                  style="height: 40px"
                  v-model="txtForm.articleTitle"
                  :placeholder="t('organizationStructure.Information.p14')"
                  :maxlength="100"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="24"
              class="mt-3 partition"
            >
              <span>*</span>
              {{ t('organizationStructure.subzone') }}：
            </el-col>
          </el-row>
          <el-form-item prop="zoningId">
            <div class="btn-list">
              <div
                :class="['item', 'line-1', { active: txtForm.zoningId == item.id }]"
                v-for="(item, index) in zoningList"
                :key="index"
                @click="changeZoning(item)"
                :title="item.zoningName"
                :disabled="publishType != 'article' && index != 0"
              >
                {{ item.zoningName }}
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="articleText">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 6 }"
              v-model="txtForm.articleText"
              :placeholder="t('organizationStructure.Information.p15')"
              :maxlength="8000"
              show-word-limit
            ></el-input>
          </el-form-item>
          <div class="mt-2">
            <Uploads
              ref="upload1"
              @change="setFileList"
              list-type="picture-card"
              :limit="18"
            ></Uploads>
          </div>
        </el-form>

        <template #footer>
          <div class="dialog-footer flexcc">
            <el-button
              color="#252628"
              plain
              @click="closeArticleFn"
            >
              {{ t('cancelText') }}
            </el-button>
            <el-button
              class="sub-btn ml-c"
              @click="addArticle"
            >
              {{ t('organizationStructure.operateType1') }}
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 二维码分享 -->
      <el-dialog
        v-model="QrCodeVis"
        :title="t('blog.dlt2')"
        width="30%"
        destroy-on-close
        center
      >
        <el-image
          :src="currentLinkImg"
          class="qrcode"
        ></el-image>
      </el-dialog>
    </div>
    <div v-if="$isMobile">
      <mBlog />
    </div>

    <!-- 公告详情 -->
    <NoticeDetail
      v-if="noticeDialogVisible"
      :visible="noticeDialogVisible"
      :item="noticesActive"
      @close="noticeDialogVisible = false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Uploads from '@/components/Uploads.vue'
import { useI18n } from 'vue-i18n'
import mBlog from './mBlog.vue'
import { listPage, popularList, getCustomerInfo, getZoningList, articleAdd, getNoticesList } from '@/service/blog.js'
import { uploads } from '@/service/common.js'
import { dateFormat, toText, openUrl } from '@/utils/index'
import bg_gg from '@/assets/img/blog_01.png'
import bg2 from '@/assets/img/blog_02.png'
import bg3 from '@/assets/img/blog_03.png'
import bg4 from '@/assets/img/blog_04.png'
import bg5 from '@/assets/img/blog_05.png'
import bg6 from '@/assets/img/blog_06.png'
import useDict from '@/hooks/useDict'
import NoticeDetail from '@/views/index/NoticeDetail.vue'
import useAd from '@/stores/ad'
import Banner from '@/components/Banner.vue'
import axios from 'axios'
import useLogin from '@/stores/login'
import ActicleComment from '@/components/ActicleComment.vue'

import useClipboard from 'vue-clipboard3'
// 默认头像
const defaultAvatar = new URL('@/assets/img/icon_touxiang_01.png', import.meta.url)

const { toClipboard } = useClipboard()
const copy = async (text) => {
  try {
    await toClipboard(text)
    ElMessage.success(t('news.copy'))
  } catch (e) {}
}

const storeAd = useAd()
const { getAd } = storeAd
const storeLogin = useLogin()

// 会员等级
const memberGradeCode = storeLogin?.userInfo?.memberGradeCode || ''

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties
const { dictData, getDictData } = useDict()

const noticeDialogVisible = ref(false) // 详情弹窗
const noticesActive = ref(null) // 查看的当前公告
const noticesClick = (item) => {
  noticeDialogVisible.value = true
  noticesActive.value = item
}

const tabList = ref(null)
const router = useRouter()
const route = useRoute()
const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

const diaologVis = ref(false)
const listData = ref([])
const hotListData = ref([])
const bgImgArr = ref([bg2, bg3, bg4, bg5, bg6, bg_gg])
const platAnnouncement = ref(0)
const currentLinkImg = ref('')
const QrCodeVis = ref(false)
const txtForm = ref({
  enterpriseFlag: false,
  zoningId: undefined,
  articleText: undefined,
  customerId: undefined,
  articleTitle: undefined,
  articlePicture: undefined
})
const txtRules = ref({
  articleTitle: [{ required: false, message: t('blog.r1'), trigger: 'blur' }],
  zoningId: [{ required: true, message: t('blog.r2'), trigger: 'blur' }],
  articleText: [{ required: true, message: t('blog.r3'), trigger: 'blur' }]
})
const txtFormEl = ref(null)

const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数

const queryForm = ref({
  queryType: 0,
  zoningId: route.query.id
})
const currentPageIndex = ref(0)
const fileList = ref([])
const upload1 = ref(null)
const upload2 = ref(null)
const setFileList = (val) => {
  fileList.value = val
}
// 上传
const handleUpload = (ref, list) => {
  return new Promise((resolve, reject) => {
    const newList = list.value.filter((item) => item.raw)
    const oldList = list.value.filter((item) => !item.raw).map((item) => item.url)

    if (newList.length) {
      const formData = new FormData()
      newList.forEach((item) => {
        formData.append('files', item.raw)
      })
      uploads(formData).then(({ urls }) => {
        const resultFile = urls.split(',')
        list.value = resultFile.map((item) => {
          return {
            name: item.slice(item.lastIndexOf('/') + 1),
            url: item
          }
        })
        ref.value.setFileList(fileList.value)
        resolve([...oldList, ...resultFile])
      })
    } else {
      resolve(oldList)
    }
  })
}
const changeList = (item) => {
  page.value.pageNum = 1
  if (item.id != -1) {
    queryForm.value.zoningId = item.id
    getList()
  } else {
    queryForm.value.zoningId = -1
    getNoticesListFn()
  }
}

const getNoticesListFn = () => {
  getNoticesList(page.value).then((res) => {
    if (queryForm.value.zoningId == -1) {
      listData.value = res.rows
      total.value = res.total
    }
    platAnnouncement.value = res.total
  })
}
const handleCurrentChange = (val) => {
  if (queryForm.value.zoningId != -1) {
    getList()
  } else {
    getNoticesListFn()
  }
}
const showConfig = ref(false)
const getList = () => {
  showConfig.value = false
  listPage(page.value, queryForm.value).then((res) => {
    listData.value = res.rows.map((item) => {
      item.isShowMore = false
      item.imgList = item.articlePicture?.split(',')?.slice(0, 6)
      item.imgListAll = item.articlePicture?.split(',') || []
      item.commentFlag = false
      item.shareFLag = false
      item.likeFlag = item.isLike > 0 ? true : false
      item.collectFlag = item.isCollect > 0 ? true : false
      return item
    })
    total.value = res.total
  }).finally(_=> {
    showConfig.value = true
  })
}
const hotQuery = ref({
  pageNum: 1,
  pageSize: 6
})
const hotTotal = ref(undefined)
const hotList = () => {
  popularList(hotQuery.value).then((res) => {
    hotListData.value = res.data
    hotTotal.value = res.total
  })
}
const nextFn = () => {
  if (currentPageIndex.value == Math.floor(zoningList.value.length / 6)) {
    return false
  } else {
    currentPageIndex.value = currentPageIndex.value + 1
    tabList.value.style.marginLeft = -(1260 * currentPageIndex.value + 12 * currentPageIndex.value) + 'px'
  }
}
const preFn = () => {
  if (currentPageIndex.value == 0) {
    return false
  } else {
    currentPageIndex.value = currentPageIndex.value - 1
    tabList.value.style.marginLeft = -(1260 * currentPageIndex.value + 12 * currentPageIndex.value) + 'px'
  }
}
const routerPush = (path, query, isHot, item) => {
  if (queryForm.value.zoningId == -1 && !isHot) {
    if (!item) return
    noticesClick(item)
    return false
  }
  openUrl(path, query)
}

const publishType = ref('')
//发布文章/求助打开弹框
const isQiu = ref(false)
const openDialog = (type) => {
  if (!storeLogin.userInfo) {
    ElMessage.warning(t('notLoginMsg'))
    storeLogin.setLoginDialog(true)
    return
  }
  publishType.value = type
  diaologVis.value = true
  //判断是发布求助还是发布文章
  if (type == 'article') {
    return
  } else {

    var seekAsisit = zoningList.value.find((item)=>{
      return item.zoningName === '求助分区' || item.zoningName === '求助'
    })

    txtForm.value.zoningId = seekAsisit.id
    isQiu.value = true
  }
}
watch(diaologVis, (n) => {
  if (!n) {
    isQiu.value = false
  }
})
const changeZoning = (item) => {
  if (isQiu.value) return
  txtForm.value.zoningId = item.id
}

//新增文章
const addArticle = () => {
  if (!txtFormEl.value) return
  txtFormEl.value.validate(async (valid, fields) => {
    if (valid) {
      let urllist = await handleUpload(upload1, fileList)
      if (urllist.length) {
        txtForm.value.articlePicture = urllist.join()
      }
      txtForm.value.enterpriseFlag = Number(txtForm.value.enterpriseFlag)
      let data = {
        ...txtForm.value,
        customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
      }
      articleAdd(data).then(({ msg }) => {
        ElMessage({
          type: 'success',
          message: msg
        })
        getZoningListFn()
        closeArticleFn()
      })
    }
  })
}
const closeArticleFn = () => {
  txtForm.value = {
    enterpriseFlag: false,
    zoningId: undefined,
    articleText: undefined,
    customerId: undefined,
    articleTitle: undefined,
    articlePicture: undefined
  }
  diaologVis.value = false

  if (queryForm.value.zoningId == -1) {
    getNoticesListFn()
  } else {
    getList()
  }
}

//
const zoningList = ref([])
const getZoningListFn = () => {
  getZoningList().then(({ data }) => {
    zoningList.value = data
  })
}

//
const creatorInfo = ref({})
const getCustomerInfoFn = () => {
  let localeObj = JSON.parse(localStorage.getItem('login'))?.userInfo
  if (!localeObj) return
  getCustomerInfo({ customerId: localeObj.id }).then((res) => {
    creatorInfo.value = { ...res.data, ...localeObj }
    creatorInfo.value.enterpriseInfo = localeObj.enterpriseCountry + '-' + localeObj.enterpriseName
    creatorInfo.value.enterpriseLogo = localeObj.enterpriseLogo
    creatorInfo.value.isEnterprise = localeObj.isEnterprise
  })
}

//
const init = async () => {
  getDictData('report_type')
  hotList()
  getCustomerInfoFn()
  getZoningListFn()
  getList()
  getNoticesListFn()
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.divider {
  width: 100%;
  height: 2px;
  background: black;
  border-radius: 1px;
  margin: 20px 0px;
}

.article-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.toggle-btn {
  cursor: pointer;
  transform: rotateZ(90deg);
}

.blog {
  .head {
    padding-bottom: 15px;
    position: relative;

    .banner {
      img {
        display: block;
        width: 100%;
      }
    }

    .head-portrait {
      margin-top: -80px;
      margin-left: 25px;

      img {
        width: 160px;
        height: 160px;
        border: 2px solid #fff;
        border-radius: 50%;
        display: block;
        background: #fff;
      }
    }

    .name {
      font-weight: bold;
      font-size: 24px;
    }

    .btn {
      .el-button {
        height: 44px;
        text-transform: uppercase;
        font-weight: bold;
      }
    }

    .tab-box {
      width: 100%;
      overflow-x: hidden;
      height: 100px;
      margin-top: 23px;

      .btn-pre,
      .btn-next {
        cursor: pointer;
        width: 40px;
        height: 40px;
        background: rgba(37, 38, 40, 1);
        border-radius: 50%;
        text-align: center;
        position: absolute;
        border: none;
        bottom: 58px;
        z-index: 9;
        color: white;
        line-height: 40px;
        font-size: 18px;
        font-weight: 600;
      }

      .btn-pre {
        left: 274px;
      }

      .btn-next {
        right: 274px;
      }

      .tab-list {
        // min-width: 200%;
        // display: flex;
        transition: 1s;
        white-space: nowrap;

        .tab-item {
          width: 200px;
          height: 70px;
          display: inline-block;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          text-align: center;
          padding-top: 14px;
          justify-content: space-between;
          position: relative;
          cursor: pointer;

          &:not(:first-child) {
            margin-left: 12px;
          }

          .type-active {
            position: absolute;
            bottom: -20px;
            left: 0px;
          }

          h3 {
            font-size: 12px;

            font-weight: bold;
            color: #ffffff;
          }

          p {
            font-size: 12px;

            font-weight: 400;
            color: #ffffff;
            margin-top: 4px;

            span {
              font-size: 18px;

              font-weight: bold;
              color: #ca2a02;
            }
          }
        }
      }
    }
  }

  .main {
    background: #f5f5f5;
    padding: 30px 0 50px 0px;
    margin-bottom: -76px;

    .grid {
      display: grid;
      grid-template-columns: 830px auto;
      gap: 21px;
    }

    .left {
      width: 830px;
      // padding-left: 30px;
      padding-bottom: 30px;

      :deep(.head) {
        font-size: 20px;

        font-weight: bold;
        color: rgba(202, 42, 2, 1);

        span {
          font-size: 20px;
        }
      }

      .card {
        background: #fff;
        border-radius: 4px;

        .list-box {
          width: 100%;
          // max-height: 1145px;
          overflow-y: auto;

          .item {
            background: rgba(245, 245, 245, 1);
            margin-bottom: 25px;
            padding: 23px 26px 26px 40px;

            &:last-child {
              margin-bottom: 0;
            }

            .user-info {
              display: flex;
              cursor: pointer;

              .head-sculpture {
                img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  margin-right: 12px;
                }
              }

              .name {
                h2 {
                  font-size: 16px;
                  font-weight: bold;
                  color: #252628;

                  .date {
                    font-size: 14px;
                    font-weight: 400;
                    color: #9d9fa5;
                  }
                }

                p {
                  font-size: 14px;
                  font-weight: 400;
                  color: #9d9fa5;
                  margin-top: 4px;
                }
              }
            }

            .title {
              font-size: 16px;
              font-weight: bold;
              color: #252628;
              cursor: pointer;
            }

            .content {
              font-size: 16px;

              font-weight: 400;
              color: #6a6973;
              line-height: 24px;
              max-width: 100%;
              white-space: pre-line;
              overflow-wrap: break-word;
              .show-more {
                color: #000;
                cursor: pointer;
              }
            }
          }
        }
      }
    }

    .right {
      width: 410px;

      :deep(.head) {
        font-size: 20px;

        font-weight: bold;

        span {
          font-size: 20px;
        }
      }

      .box {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .head-sculpture {
          img {
            width: 103px;
            height: 103px;
            border: 4px solid #ffffff;
            border-radius: 50%;
            margin: 0 auto;
            display: block;
          }
        }

        .name {
          font-size: 18px;
          font-family: Source Han Sans CN;
          font-weight: 800;
          color: #252628;
          line-height: 22px;
          text-align: center;
        }

        .signature {
          font-size: 14px;

          font-weight: 400;
          color: #9d9fa5;
          text-align: center;
        }

        .btn-style {
          width: 100%;
          // padding-left: 0px;
          margin-top: 12px;
          margin-bottom: 16px;
          display: flex;
          justify-content: center;

          button {
            min-width: 140px;
            height: 34px;
            margin-left: 17;

            &:last-child {
              background: rgba(37, 38, 40, 1);
              color: #fff;
            }
          }
        }

        .my {
          width: 100%;

          p {
            width: 100%;
            text-align: center;
            font-size: 14px;
            font-family: 'Microsoft YaHei';
            font-weight: 400;
            color: #6a6973;

            &:nth-child(odd) {
              font-family: 'Barlow Condensed SemiBold';
              font-weight: 700;
              color: #252628;
              line-height: 22px;
            }
          }
        }
      }

      .hot-list {
        width: 100%;
        padding-bottom: 25px;
        padding-left: 20px;
        list-style: circle;
        max-height: 350px;
        overflow-y: auto;

        .hot-item {
          height: 37px;
          margin-top: 25px;
          list-style: disc;
          cursor: pointer;

          &::marker {
            color: red;
          }

          p {
            margin-top: 4px;
            font-size: 12px;
            color: rgba(157, 159, 165, 1);

            font-weight: 400;
          }
        }
      }

      .advertisement {
        width: 100%;
        height: 334px;
        background: #252628;
      }
    }
  }
}

.user-info {
  display: flex;

  .head-sculpture {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
    }
  }

  .name {
    h2 {
      font-size: 16px;

      font-weight: bold;
      color: #252628;

      .date {
        font-size: 14px;

        font-weight: 400;
        color: #9d9fa5;
      }
    }

    p {
      font-size: 14px;

      font-weight: 400;
      color: #9d9fa5;
      margin-top: 4px;
    }
  }
}

.partition {
  font-size: 16px;

  font-weight: bold;
  color: #252628;

  span {
    color: rgba(202, 42, 2, 1);
  }
}

.btn-list {
  width: 100%;
  display: grid;
  // flex-direction: ;
  margin-top: 20px;
  margin-bottom: 20px;
  grid-template-columns: repeat(7, calc(100% / 7 - 9px));
  gap: 10px;

  .item {
    border-radius: 0px;
    background: rgb(250, 198, 185);
    font-size: 12px;
    padding: 0 10px;
    color: #1c1e22;
    border: 1px solid rgb(250, 198, 185);
    text-align: center;
  }

  .active {
    border: 1px solid rgba(202, 42, 2, 1);
    background: rgba(202, 42, 2, 1);
    color: white;
  }
}

.sub-btn {
  min-width: 100px;
  max-width: 340px;
  height: 40px;
  background: #252628;
  border-radius: 4px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.qrcode {
  width: 100%;
  height: 100%;

  :deep(img) {
    width: 40%;
    height: 40%;
    margin-left: 30%;
  }
}
</style>
